<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        button{
            margin:20px;
            padding:20px;
            font:20px 华文行楷;
        }
        div{
            width: 100px;
            height: 100px;
            margin-top:20px;
            top:100px;
            background-color:pink;
            position:absolute;
            left:10px;
        }
    </style>
</head>
<body>
<button>运动到400然后回来</button>
<div></div>
<script>
    var btn=document.getElementsByTagName("button");
    var div=document.getElementsByTagName("div")[0];
    //开启回调函数（完成一个目标后再完成另一个目标）
    btn[0].onclick=function(){
        var json1={"left":400,"top":400,"width":200,"height":200,"border-radius":100};
        moveDo(div,json1,function(){
            var json2={"left":10,"top":100,"width":100,"height":100,"border-radius":0};
            moveDo(div,json2);
        });
    }



//获取元素样式
    function getStyle(obj,attr){
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
        //三元运算，if判断的特殊写法
    }


    function moveDo(element,json,fn){
        //进行缓动
        clearInterval(element.timer);
        element.timer=setInterval(function(){
            //遍历属性和值，进行分别处理(样式为键，目标值为键值)
            var bool=true;
            for(var k in json){
                //最后是像素的时候一像素的项目表前进,
                //避免offsetTop值四舍五入使当前时钟达到不了目标值
                var leader;//防止不存在的情况下报错
                if(k==="opacity"){
                    leader=getStyle(element,k)*100||100;
                }else{
                    leader=parseInt(getStyle(element,k))||0;
                }
                var step=(json[k]-leader)/10;
                step=step>0?Math.ceil(step):Math.floor(step);
                leader=leader+step;
                //透明度
                if(k==="opacity"){
                    element.style[k]=json[k]/100;
                    //兼容IE678
                    element.style.filter="alpha(opacity="+leader+")";

                    //层级
                }else if(k==="zIndex"){
                    element.style.zIndex=json[k];

                    //其他情况
                }else{
                    element.style[k]=leader+"px";
                }

                //检测缓动动画达到目标后是否清除计时器

                if(Math.abs(json[k]-leader)>Math.abs(step)){
                    //哪怕存在一个样式不满足要求，都将bool赋值false，不能清除计时器
                    bool=false;
                }
            }
            if(bool){
                for(var k in json){
                    element.style[k]=json[k]+"px";
                }
                clearInterval(element.timer);
                fn&&fn();//存在的情况的执行
            }
        },30);
    }
</script>
</body>
</html>